<template>
  <div class="layout-padding">
    <div class="layout-padding-auto layout-padding-view scroll">
      <el-row v-show="showSearch">
        <el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList" style="width: 1600px">
          <el-row>
            <el-form-item>
              <el-text style="font-size: 20px;font-weight: bold;margin-left: 20px">{{examData.examName}}考试</el-text>
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label="参考组织:" class="content1">
              <el-text>{{examData.groupName}}</el-text>
            </el-form-item>
            <el-form-item label="参考岗位:" class="content3">
              <el-text>{{examData.postName}}</el-text>
            </el-form-item>
            <el-form-item label="参考人数:" class="content2">
              <el-text>{{examData.expectedNum}}人</el-text>
            </el-form-item>
            <el-form-item label="开考时间:" class="content">
              <el-text>{{examData.specifyTimeStart}}</el-text>
            </el-form-item>
            <el-form-item label="剩余时间:" class="content">
              <el-text>{{examData.time}}</el-text>
            </el-form-item>
          </el-row>
          <el-row :gutter="22">
<!--     得分情况       -->
            <el-col :span="8">
              <el-row>
                <el-card class="box-card" style="margin-left: 20px">
                  <div class="grid-content bg-purple scroll" >
                    <el-text style="font-size: 20px;font-weight: bold">得分情况</el-text>
                    <div id="canvas1" ref="canvas1" style="width:450px;height: 280px "v-if="isShow1"></div>
                    <div  style="width:450px;height: 270px "v-if="!isShow1">
                      <div style="margin: 10px 30px">
                        <el-empty description="暂无数据" />
                      </div>
                    </div>
                  </div>
                </el-card>
              </el-row>
              <el-row>
              </el-row>
            </el-col>
<!--   考试异常人员         -->
            <el-col :span="8">
              <el-row>
                <el-card class="box-card" style="margin-left: 10px">
                  <div class="grid-content bg-purple scroll">
                    <el-text style="font-size: 20px;font-weight: bold">考试异常人员</el-text>
                    <el-text style="color: red">(异常行为包括:切屏,替考,考试前人脸验证失败)</el-text>
                    <div id="canvas2" ref="canvas2" style="width:450px;height: 260px "v-if="isShow2"></div>
                    <div  style="width:450px;height: 250px "v-if="!isShow2">
                      <div style="margin: 10px 30px">
                        <el-empty description="暂无数据" />
                      </div>
                    </div>
                  </div>
                  <el-button type="primary"  @click="sendMessage1" size="mini" style="margin-left: 180px;font-size: 10px;margin-top: -10px">一键通知</el-button>
                </el-card>
              </el-row>
              <el-row>
              </el-row>
            </el-col>
<!--    未参考人员    -->
            <el-col :span="4.5">
              <el-row>
                <el-card class="box-card" >
                  <el-text style="font-size: 18px;font-weight: bold;margin-left: 20px">未参考人员({{unreferencedPersonsNumber}}人)</el-text>
                  <div class="grid-content bg-purple" style="width: 200px;height: 240px;overflow-y:scroll;overflow-x:hidden">
                    <div v-for="(item,index) in unreferencedPersonsList" :key="item.id" style="margin-top: 15px" >
                      <el-text style="margin:0 20px 0 40px;font-weight: bold">{{index+1}}</el-text>
                      <el-text style="font-weight: bold">{{item.personName}}</el-text>
                    </div>
                  </div>
                  <el-button type="primary" @click="sendMessage2" size="mini" style="margin-left: 50px;margin-top: 10px;font-size: 10px">一键通知</el-button>
                </el-card>
              </el-row>
              <el-row>
              </el-row>
            </el-col>
<!--     成绩不合格人员       -->
            <el-col :span="4.5">
              <el-row>
                <el-card class="box-card">
                  <el-text style="font-size: 18px;font-weight: bold;margin-left: 20px">成绩不合格人员({{notPassPersonsNumber}}人)</el-text>
                  <div class="grid-content bg-purple" style="width: 200px;height: 190px;overflow-y:scroll;overflow-x:hidden">
                    <div v-for="(item,index) in notPassPersonsList" :key="item.id" style="margin-top: 15px">
                      <el-text style="margin:0 20px 0 40px;font-weight: bold">{{index+1}}</el-text>
                      <el-text style="font-weight: bold">{{item.personName}}</el-text>
                    </div>
                  </div>
                  <el-button type="primary" size="mini" style="margin-left: 40px;margin-top: 20px;font-size: 10px" @click="sendFile">发送学习资料</el-button><br/>
                  <el-button type="primary"  @click="sendMessage3" size="mini" style="margin-left: 50px;margin-top: 10px;font-size: 10px">一键通知</el-button>
                </el-card>
              </el-row>
              <el-row>
              </el-row>
            </el-col>
          </el-row>
          <el-row style="margin-left: 20px;margin-top: 50px">
            <el-form-item label="姓名" prop="userName">
              <el-select  v-model="state.queryForm.personName" filterable  clearable>
                <el-option v-for="item in nameList" :key="item.userName" :label="item.personName" :value="item.personName"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button icon="search" type="primary" @click="getDataList">查询</el-button>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
<!--      <el-row>-->
<!--        <div class="mb8" style="width: 100%">-->
<!--          <right-toolbar v-model:showSearch="showSearch" :export="'train_ksglTranscript_export'"-->
<!--                @exportExcel="exportExcel" class="ml10 mr20" style="float: right;"-->
<!--            @queryTable="getDataList"></right-toolbar>-->
<!--        </div>-->
<!--      </el-row>-->
  <el-row>
  <el-table :data="state.dataList" v-loading="state.loading" border
            :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
            @selection-change="selectionChangHandle"
            @sort-change="sortChangeHandle">
    <el-table-column type="selection" width="40" align="center" />
    <el-table-column type="index" label="#" width="50" />
    <el-table-column prop="personName" label="姓名" width="100"  show-overflow-tooltip/>
    <el-table-column prop="groupName" label="参与组织" width="400"   show-overflow-tooltip/>
    <el-table-column prop="postName" label="参与岗位"  show-overflow-tooltip/>
    <el-table-column prop="automaticScore" label="自动判卷成绩(分)" :formatter="formatScore"  show-overflow-tooltip/>
    <el-table-column prop="manualScore" label="手动判卷成绩(分)" :formatter="formatScore"  show-overflow-tooltip/>
    <el-table-column prop="totalScore" label="总成绩(分)" :formatter="formatScore"   show-overflow-tooltip/>
    <el-table-column prop="useTime" label="考试用时(分钟)"  show-overflow-tooltip/>
    <el-table-column label="操作" width="200">
      <template #default="scope">
<!--        <el-button icon="edit-pen" text type="primary" v-auth="'train_ksglTranscript_edit'"-->
<!--                   @click="formDialogRef.openDialog(scope.row.id)">编辑</el-button>-->
<!--        <el-button icon="delete" text type="primary" v-auth="'train_ksglTranscript_del'" @click="handleDelete([scope.row.id])">删除</el-button>-->
        <el-button icon="edit-pen" text type="primary" @click="getGrade(scope.row)">人工判卷</el-button>
      </template>
    </el-table-column>
  </el-table>
  </el-row>
      <pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
    </div>
<!-- 编辑、新增  -->
    <form-dialog ref="formDialogRef" @refresh="getDataList(false)" />
<!-- 人工判卷弹框  -->
    <el-dialog v-model="centerDialogVisible1"  width="60%" >
      <template #header>
        <span class="dialog-header">
           <el-text style="font-size:20px;font-weight: bold;margin-left: 20px">人工判卷</el-text>
           <el-text style="font-size:20px;font-weight: bold;color: red">(只允许进行一次打分，请谨慎评分！)</el-text>
        </span>
      </template>
      <div class="line"></div>
            <el-row style="margin-top: 10px">
              <div  v-for="(item, index) in ManualDataList" :key="item.id" class="item scroll">
                <el-card>
                  <el-row>
                    <span style="font-weight: bold;font-size: 16px;margin-right: 20px;margin-bottom: 5px">第{{ index + 1 }}道</span>
                    <span style="margin-right: 20px">总分: {{ item.totalScore }}分</span>
                    <span>得分: </span>
                    <el-input-number v-model.number="item.getScore" size="small" :min="0"  :disabled="manualNumber"
                                     :max=item.totalScore @change="handleChange($event, index)" style="width: 90px"/>
                    <span>分</span>
                  </el-row>
                  <el-row style="margin-bottom: 5px">
                    <el-text>题目:{{item.question}}</el-text>
                  </el-row>
                  <el-row style="margin-bottom: 5px">
                    <el-text>解析:<br/>{{item.correctValue}}</el-text>
                  </el-row>
                  <el-row style="margin-bottom: 30px">
                    <el-text>答案:<br/>{{item.userValue}}</el-text>
                  </el-row>
                </el-card>
              </div>
            </el-row>
      <template #footer>
             <span style="margin-right: 100px;font-size: 18px;">人工判卷总分:{{totalScoreList}}分</span>
              <span class="dialog-footer">
                <el-button type="primary" style="margin-left: -10px;margin-top: -10px" @click="submitBtn1">确认</el-button>
              </span>
      </template>
    </el-dialog>
<!-- 发送学习资料  -->
    <el-dialog v-model="centerDialogVisible2"  width="70%">
      <template #header>
        <span class="dialog-header">
           <el-text style="font-size:20px;font-weight: bold;margin-left: 20px">发送学习资料</el-text>
        </span>
      </template>
      <div class="line"></div>
      <el-form :model="sendFileForm" ref="queryRef1"  :inline="true"  style="width: 100%;margin-top: 20px;margin-left: 15px">
        <el-form-item label="专业名称" prop="majorNameIds">
          <el-select @change="getItem3" v-model="sendFileForm.majorNameIds" filterable clearable multiple collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 240px">
            <el-option v-for="item in options2"   :key="item.zymcId" :label="item.zymcName" :value="item.zymcId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="关键点" prop="keyPoints">
          <el-select @change="getItem2" v-model="sendFileForm.keyPointIds" filterable multiple clearable collapse-tags collapse-tags-tooltip :max-collapse-tags="3" placeholder="请选择" style="width: 90%;">
            <el-option v-for="item in keypointsListData"  :key="item.keyId" :label="item.zymcName+'-'+item.keyPoint" :value="item.keyId"/>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 35%;">
          <el-button icon="search" type="primary" @click="getFileList">查询</el-button>
          <el-button icon="Refresh" @click="resetQuery1">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row style="margin-top: 10px;margin-left: 20px">
        <el-text class="text1">资料列表:</el-text>
        <el-table :data="dataList" v-loading="dataListLoading" border
                  :cell-style="tableStyle.cellStyle" :header-cell-style="tableStyle.headerCellStyle"
                  @selection-change="selectionChangHandle1"
                  @sort-change="sortChangeHandle">
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column type="index" label="#" width="50" />
          <el-table-column prop="dataName" label="资料名称"  show-overflow-tooltip/>
          <el-table-column prop="studyGroupId" label="学习组织" width="300" :formatter="formatter" show-overflow-tooltip/>
          <el-table-column prop="studyPost" label="学习岗位"  show-overflow-tooltip/>
          <el-table-column prop="majorNameId" label="专业名称"  :formatter="formatter1" show-overflow-tooltip/>
          <el-table-column prop="keyPoint" label="关键点"  show-overflow-tooltip/>
          <el-table-column prop="dataType" label="资料类型"  show-overflow-tooltip/>
          <el-table-column prop="createTime" label="创建时间"  show-overflow-tooltip/>
          <el-table-column prop="createBy" label="创建人员"  show-overflow-tooltip/>
        </el-table>
        <div class="avue-crud__pagination">
          <el-pagination
                  @size-change="sizeChangeHandle1"
                  @current-change="currentChangeHandle1"
                  :current-page="pageIndex"
                  :page-sizes="[5, 10, 15]"
                  :page-size="pageSize"
                  :total="totalPage"
                  background
                  layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </el-row>
      <template #footer>
        <span class="dialog-footer">
                <el-button type="primary" style="margin-top: -10px;margin-right: 50px" @click="submitBtn">确认发送</el-button>
                <el-button type="danger" style="margin-left: -10px;margin-top: -10px" @click="centerDialogVisible2=false">取消</el-button>
              </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="systemKsglTranscript">
import { BasicTableProps, useTable } from "/@/hooks/table";
import { fetchList, delObjs,normalPersons,abnormalPersons,unreferencedPersons,notPassPersons,getExamList,sendUnreferencedPersonsMsg,sendNotPassPersonsMsg,
  getNameList,getManualData,submitData,sendAbnormalPersonsMsg,fetchList1,addDataListByExam} from "/@/api/train/ksglTranscript";
import { useMessage, useMessageBox } from "/@/hooks/message";
import { useDict } from '/@/hooks/dict';
import * as echarts from "echarts";
import { ref,reactive,getCurrentInstance, onMounted, onUnmounted } from 'vue';
import {ElMessage} from "element-plus";
import {professionalnameList} from "/@/api/train/jnglProfessionLevel";
import {getKeyPointListByZymcIds} from "/@/api/train/ksglExamList";
const { proxy } = getCurrentInstance()
// 引入组件
const FormDialog = defineAsyncComponent(() => import('./form.vue'));
// 定义查询字典
const route = useRoute();
// 定义变量内容
const formDialogRef = ref()
const queryRef = ref()
const queryRef1 = ref()
//关键点
const keypointsListData = reactive([{}])
//专业名称数据
const options2 =reactive([{}])
const zymcArr = ref([])
const sendFileForm = ref({})
const unreferencedPersonsNumber = ref()
const notPassPersonsNumber = ref()
const notPassPersonsList = ref()
const sendAbnormalPersonList = ref([])
const sendNotPassPersonsList = ref([])
const sendNotPassPersonsList1 = ref([])
const sendUnreferencedPersonsList = ref([])
const unreferencedPersonsList = ref()
const getKsglScoreList = ref([])
const objManual = ref({})
const objManual1 = ref({})
const totalScoreList = ref(0)
const showSearch = ref(true)
const centerDialogVisible1 = ref(false)
const centerDialogVisible2 = ref(false)
const isShow1 = ref(true)
const isShow2 = ref(true)
const examData = reactive({})
const normalPersonList = reactive([{}])
const ManualDataList = reactive([{}])
const nameList = reactive([{}])
const abnormalPersonList = reactive([{}])
const dataListLoading = ref(false);
const manualNumber = ref(false);
const dataList = ref<any[]>([]);
const totalPage = ref(0);
const pageIndex = ref(1); // 假设第一页是1
const pageSize = ref(10); // 假设每页显示10条数据
// 多选变量
const selectObjs = ref([]) as any
const selectObjs1 = ref([]) as any
const multiple = ref(true)
const canvas1 = ref() // dom实例
let myChart1 = null // echarts实例
const canvas2 = ref() // dom实例
let myChart2 = null // echarts实例
const state: BasicTableProps = reactive<BasicTableProps>({
  queryForm: {
    examId:route.query.examId
  },
  pageList: fetchList
})
//  table hook
const {
  getDataList,
  currentChangeHandle,
  sizeChangeHandle,
  sortChangeHandle,
  downBlobFile,
	tableStyle
} = useTable(state)

// 清空搜索条件
const resetQuery = () => {
  state.queryForm.personName = null
  // 清空搜索条件
  queryRef.value?.resetFields()
  // 清空多选
  selectObjs.value = []
  getDataList()
}
const resetQuery1 = () => {
  // 清空搜索条件
  queryRef1.value?.resetFields()
  sendFileForm.value.keyPointIds = null
  sendFileForm.value.keyPointId = null
  sendFileForm.value.majorNameId = null
}
//挂载完毕
onMounted(()=>{
  getProfessionalName()
  let obj = {
    examId :route.query.examId
  }
  getNameList(obj).then(res=>{
    Object.assign(nameList,res.data)
  })
  getExamList(obj).then((res)=>{
    Object.assign(examData,res.data)
  })
  //得分情况
  normalPersons(obj).then((res)=>{
    Object.assign(normalPersonList,res.data)
    if(res.data.length == 0){
      isShow1.value = false
      // console.log('isShow1.value',isShow1.value)
    }
    let score = []
    let person = []
    normalPersonList.forEach(item=>{
      person.push(item.personName)
      score.push(item.totalScore)
    })
    renderChart1(person, score);
  })
  //考试异常人员
  abnormalPersons(obj).then((res)=>{
    let score1 = []
    let person1 = []
    Object.assign(abnormalPersonList,res.data)
    if(res.data.length == 0){
      isShow2.value = false
    }
    abnormalPersonList.forEach(item=>{
      person1.push(item.personName)
      score1.push(item.totalScore)
      let obj ={
        username:item.userName,
        name:item.personName
      }
      sendAbnormalPersonList.value.push(obj)
    })
    renderChart2(person1, score1);

  })
  //未参考人员
  unreferencedPersons(obj).then((res)=>{
    unreferencedPersonsList.value = res.data
    unreferencedPersonsNumber.value = unreferencedPersonsList.value.length
    unreferencedPersonsList.value.forEach(item=>{
      let obj ={
        username:item.userName,
        name:item.personName
      }
      sendUnreferencedPersonsList.value.push(obj)
    })
  })
  //成绩不合格人员
  notPassPersons(obj).then((res)=>{
    notPassPersonsList.value = res.data
    notPassPersonsNumber.value = notPassPersonsList.value.length
    notPassPersonsList.value.forEach(item=>{
      let obj ={
        username:item.userName,
        name:item.personName
      }
      let obj1 ={
        userName:item.userName,
        name:item.personName
      }
      sendNotPassPersonsList.value.push(obj)
      sendNotPassPersonsList1.value.push(obj1)
    })
  })
})
const formatter1 = (row:any) =>{
  return  row.majorName
}
const formatter = (row:any) =>{
  return  row.studyGroup
}
//发送学习资料列表
const getFileList = async () =>{
  dataListLoading.value = true;
  try {
    const response = await fetchList1({
      ...sendFileForm.value,
      current: pageIndex.value,
      size: pageSize.value
    });
    dataList.value = response.data.records;
    totalPage.value = response.data.total;
  } catch (error) {
    console.error('Error fetching data:', error);
    // 在这里处理错误，例如显示错误消息给用户
  } finally {
    dataListLoading.value = false;
  }
}
// 每页数
const  sizeChangeHandle1 = (val:number)=> {
  pageSize.value = val
  pageIndex.value = 1
  getFileList()
}
// 当前页
const  currentChangeHandle1 =(val:number)=> {
  pageIndex.value = val
  getFileList()
}
// 多选事件
const selectionChangHandle1 = (objs: { id: string }[]) => {
  // console.log('objs',objs)
  selectObjs1.value = objs.map(({ dataId }) => dataId);
  multiple.value = !objs.length;
}
const formatScore =(row:any, column:any, cellValue:any)=> {
  // 首先尝试将 cellValue 转换为数字
  const value = Number(cellValue);
  // 检查转换后的值是否为数字且不是 NaN
  if (!isNaN(value)) {
    // 如果是整数，直接返回
    if (Number.isInteger(value)) {
      return value;
    } else {
      // 保留一位小数并返回字符串形式
      return value.toFixed(1);
    }
  } else {
    // 如果转换失败，可以返回一个默认值或者处理错误情况
    console.error('无法将 cellValue 转换为数字:', cellValue);
    return ''; // 或者返回其他合适的默认值
  }
}
const sendFile = () =>{
  centerDialogVisible2.value = true
  getFileList()
}
const getItem3=(val:any) =>{
  zymcArr.value = val
  sendFileForm.value.majorNameId = val.join(',')
  sendFileForm.value.keyPointIds = []
  getKeypointsList()
}
const getItem2=(val:any) =>{
  sendFileForm.value.keyPointId = val.join(',')
}
//专业名称
const  getProfessionalName = () => {
  professionalnameList().then((res) => {
    Object.assign(options2, res.data)
  });
};
//关键点
const  getKeypointsList = () =>{
  keypointsListData.length = 0
  const ids = {
    zymcIds:  zymcArr.value
  }
  // console.log(' queryForm----', ids,queryForm)
  getKeyPointListByZymcIds(ids).then((res: any) => {
    Object.assign(keypointsListData, res.data)
  });
}
//发送学习资料
const submitBtn = () =>{
  let obj = {
    examId :route.query.examId,
    dataIds:selectObjs1.value,
    persons:sendNotPassPersonsList1.value
  }
  addDataListByExam(obj).then((res=>{
    ElMessage({
      message: '资料成功发送',
      type: 'success',
    })
    centerDialogVisible2.value = false
  })).catch(error=>{
    ElMessage({
      message: '失败',
      type: 'error'
    })
  })
}
const submitBtn1 = () =>{
  centerDialogVisible1.value = false
  ManualDataList.forEach(item=>{
    let obj ={
      getScore:item.getScore,
      id:item.id
    }
    getKsglScoreList.value.push(obj)
  })
  objManual1.value = objManual.value
  objManual1.value.getKsglScoreList=getKsglScoreList.value
  submitData(objManual1.value).then(res=>{
    getDataList()
  })
  getKsglScoreList.value.length = 0
  objManual1.value.getKsglScoreList.length = 0
}
//评分
const handleChange = (val:any,index:any) =>{
  ManualDataList[index].getScore = val
  calculateTotalScore()
}
const calculateTotalScore=() =>{
  totalScoreList.value = ManualDataList.reduce((total, item) => total + item.getScore, 0);
}
const getGrade = (row:any) =>{
  manualNumber.value = row.manualNumber
  ManualDataList.length = 0
  centerDialogVisible1.value = true
  objManual.value= {
    examId :route.query.examId,
    userName:row.userName
  }
  getManualData( objManual.value).then(res=>{
    Object.assign(ManualDataList,res.data)
    calculateTotalScore()
  })
}
const sendMessage1 = () =>{
  sendAbnormalPersonsMsg(sendAbnormalPersonList.value).then((res=>{
    ElMessage({
      message: '成功通知',
      type: 'success',
    })
  })).catch(error=>{
    ElMessage({
      message: '失败',
      type: 'error'
    })
  })
}
const sendMessage2 = () =>{
  sendUnreferencedPersonsMsg(sendUnreferencedPersonsList.value).then((res=>{
    ElMessage({
      message: '成功通知',
      type: 'success',
    })
  })).catch(error=>{
    ElMessage({
      message: '失败',
      type: 'error'
    })
  })
}
const sendMessage3 = () =>{
  sendNotPassPersonsMsg(sendNotPassPersonsList.value).then((res=>{
    ElMessage({
      message: '成功通知',
      type: 'success',
    })
  })).catch(error=>{
    ElMessage({
      message: '失败',
      type: 'error'
    })
  })
}
// 正常得分情况
const renderChart1 = (person,score) => {
  myChart1 = proxy.$echarts.init(canvas1.value)
  myChart1.setOption({
    grid: {
      top: '40px',
      left: '70px',
      bottom:'20px',
    },
    title: {
      // text: '得分情况',
      left: 'left',
    },
    legend: {
      // data: ['得分']
    },
    tooltip: {},
    xAxis: {
      // 设置x轴不显示
      show: false
    },
    // 需要使用两个y轴，使用列表存储
    yAxis: {
      type: 'category',
      inverse: true, // 倒叙
      minInterval: 1,
      axisLabel: {
        margin:70,
        align: 'left',
        formatter: function(value, index) {
          let ind = index + 1;
          if (ind == 1) {
            return "{one|" + ind + "} {a|" + value + "}";
          } else if (ind == 2) {
            return "{two|" + ind + "} {a|" + value + "}";
          } else if (ind == 3) {
            return "{three|" + ind + "} {a|" + value + "}";
          }
          return "{four|" + ind + "} {a|" + value + "}";
        },
        rich: {
          a: {
            color: "black"
          },
          one: {
            backgroundColor: "#D5D822",
            color: "white",
            // padding: 10,
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          },
          two: {
            backgroundColor: "#C5BDBD",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          },
          three: {
            backgroundColor: "#BB6732",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          },
          four: {
            backgroundColor: "#1890FF",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          }
        }
      },
      axisLine: {
        show: false // 轴线
      },
      axisTick: {
        show: false // 刻度线
      },
      data: person,
    },
    series: [
      {
        type: 'bar',
        showBackground: true,
        barWidth: 10,
        barMaxWidth: 10,
        barMinWidth: 5,
        data: score,
        barGap: 1,
        smooth: true,
        valueAnimation: true,
        label:{
          show:true,
          position:'left',
          offset:[350,0],
          valueAnimation: true,
          color: '#000',
          formatter: '{c}',
          align:'left'
        },
        itemStyle: {
          normal: {
            color: function(params) {
              //首先定义一个数组
              var colorList = [
                '#008858','#BB6732','#D5D822','#096DD9','#FA8C16', '#D54941'
              ];
              return colorList[params.dataIndex]
            },
          },
          // 移入变色
          emphasis: {
            color: '#FFA29B',
          }
        },
      }
    ]
  })
}
// 考试异常人员
const renderChart2 = (person1,score1) => {
  myChart2 = proxy.$echarts.init(canvas2.value)
  myChart2.setOption({
    grid: {
      top: '40px',
      left: '70px',
      bottom:'20px',
    },
    title: {
      // text: '考试异常人员',
      left: 'left',
    },
    legend: {
      // data: ['得分']
    },
    tooltip: {},
    xAxis: {
      // 设置x轴不显示
      show: false
    },
    // 需要使用两个y轴，使用列表存储
    yAxis: {
      type: 'category',
      inverse: true, // 倒叙
      minInterval: 1,
      axisLabel: {
        margin:70,
        align: 'left',
        formatter: function(value, index) {
          let ind = index + 1;
          if (ind == 1) {
            return "{one|" + ind + "} {a|" + value + "}";
          } else if (ind == 2) {
            return "{two|" + ind + "} {a|" + value + "}";
          } else if (ind == 3) {
            return "{three|" + ind + "} {a|" + value + "}";
          }
          return "{four|" + ind + "} {a|" + value + "}";
        },
        rich: {
          a: {
            color: "black"
          },
          one: {
            backgroundColor: "#D5D822",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          },
          two: {
            backgroundColor: "#C5BDBD",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          },
          three: {
            backgroundColor: "#BB6732",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          },
          four: {
            backgroundColor: "#1890FF",
            color: "white",
            width: 15,
            height: 15,
            lineHeight: 15,
            align: "center",
            borderRadius: 8,
            fontSize: 8
          }
        }
      },
      axisLine: {
        show: false // 轴线
      },
      axisTick: {
        show: false // 刻度线
      },
      data: person1,
    },
    series: [
      {
        type: 'bar',
        showBackground: true,
        barWidth: 10,
        barMaxWidth: 10,
        barMinWidth: 5,
        data: score1,
        barGap: 1,
        smooth: true,
        valueAnimation: true,
        label:{
          show:true,
          position:'left',
          offset:[350,0],
          valueAnimation: true,
          color: '#000',
          formatter: '{c}',
          align:'left'
        },
        itemStyle: {
          normal: {
            color: function(params) {
              //首先定义一个数组
              var colorList = [
                '#008858','#BB6732','#D5D822','#096DD9','#FA8C16', '#D54941'
              ];
              return colorList[params.dataIndex]
            },
          },
          // 移入变色
          emphasis: {
            color: '#FFA29B',
          }
        },
      }
    ]
  })
}
// 导出excel
const exportExcel = () => {
    downBlobFile('/train/ksglTranscript/export', Object.assign(state.queryForm, { ids: selectObjs }), 'ksglTranscript.xlsx')
  }
// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
    selectObjs.value = objs.map(({ id }) => id);
    multiple.value = !objs.length;
  };
// 删除操作
const handleDelete = async (ids: string[]) => {
    try {
      await useMessageBox().confirm('此操作将永久删除');
    } catch {
      return;
    }
    try {
      await delObjs(ids);
      getDataList();
      useMessage().success('删除成功');
    } catch (err: any) {
      useMessage().error(err.msg);
    }
  };
</script>
<style lang="scss" scoped>
.scroll{
  overflow-y:scroll;
  overflow-x:hidden;
  height:100%
}
  .content{
    width: 210px;
    font-weight: bold;
  }
  .content1{
    margin-left: 20px;
    width: 620px;
    font-weight: bold;
  }
  .content2{
    width: 110px;
    font-weight: bold;
  }
  .content3{
    width: 300px;
    font-weight: bold;
  }
  .line{
    border-top: 1px dashed #817B7B;
    margin: 0 auto;
    width: 1250px;
    height: 0;
  }
  .item {
    margin-bottom: 10px;
    /*margin-left: 10px;*/
    width: 350px;
  }
  .score-input {
    width: 50px;
    margin-left: 5px;
  }
  .text1{
    margin-right: 200px;
    font-size: 16px;
    font-weight: bold;
  }
  .avue-crud__pagination{
    margin-left: 650px;
  }
</style>